<nav class="w-full p-4" [ngClass]="['bg' + default, 'text' + defaultInv]" aria-label="breadcrumb">
	<ol class="flex h-8 space-x-2">
		<li class="flex items-center">
			<a rel="noopener noreferrer" href="#" class="hover:underline" title="Back to homepage">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					class="w-5 h-5 pr-1"
					[ngClass]="['text' + plainInv]"
					fill="currentColor"
				>
					<path
						d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
					/>
				</svg>
			</a>
		</li>

		<li *ngFor="let num of [1, 2, 3]; let i = index" class="flex items-center space-x-2">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 32 32"
				class="w-2 h-2 mt-1 transform rotate-90 fill-current"
				[ngClass]="['text' + plain]"
				aria-hidden="true"
				fill="currentColor"
			>
				<path d="M32 30.031h-32l16-28.061z" />
			</svg>
			<a
				rel="noopener noreferrer"
				href="#"
				class="flex items-center px-1 capitalize hover:underline"
				[ngClass]="{'hover:no-underline cursor-default': i == 2}"
			>
				{{ i < 2 ? 'Parent' : 'Current' }}
			</a>
		</li>
	</ol>
</nav>
